diff options
Diffstat (limited to 'app/[lng]/evcp/(evcp)/rfq-last/[id]/layout.tsx')
| -rw-r--r-- | app/[lng]/evcp/(evcp)/rfq-last/[id]/layout.tsx | 95 |
1 files changed, 64 insertions, 31 deletions
diff --git a/app/[lng]/evcp/(evcp)/rfq-last/[id]/layout.tsx b/app/[lng]/evcp/(evcp)/rfq-last/[id]/layout.tsx index 999bfe8b..20281f9c 100644 --- a/app/[lng]/evcp/(evcp)/rfq-last/[id]/layout.tsx +++ b/app/[lng]/evcp/(evcp)/rfq-last/[id]/layout.tsx @@ -5,11 +5,12 @@ import { SidebarNav } from "@/components/layout/sidebar-nav" import { formatDate } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" -import { ArrowLeft, Clock, AlertTriangle, CheckCircle, XCircle, AlertCircle } from "lucide-react" +import { ArrowLeft, Clock, AlertTriangle, CheckCircle, XCircle, AlertCircle, Calendar, CalendarDays } from "lucide-react" import { RfqsLastView } from "@/db/schema" import { findRfqLastById } from "@/lib/rfq-last/service" import { differenceInDays } from "date-fns" import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert" +import { DueDateEditButton } from "@/lib/rfq-last/due-date-edit-button" export const metadata: Metadata = { title: "견적 목록 상세", @@ -61,11 +62,11 @@ export default async function RfqLayout({ // Due Date 상태 계산 함수 const getDueDateStatus = (dueDate: Date | string | null) => { if (!dueDate) return null; - + const now = new Date(); const due = new Date(dueDate); const daysLeft = differenceInDays(due, now); - + if (daysLeft < 0) { return { icon: <XCircle className="h-4 w-4" />, @@ -111,36 +112,68 @@ export default async function RfqLayout({ <div className="container py-6"> <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow"> <div className="hidden space-y-6 p-10 pb-16 md:block"> - <div className="flex items-center justify-end mb-4"> - <Link href={`/${lng}/evcp/rfq-last`} passHref> - <Button variant="ghost" className="flex items-center text-primary hover:text-primary/80 transition-colors p-0 h-auto"> - <ArrowLeft className="mr-1 h-4 w-4" /> - <span>견적 목록으로 돌아가기</span> - </Button> - </Link> - </div> <div className="space-y-0.5"> - {/* 제목 로직 수정: rfqTitle 있으면 사용, 없으면 rfqCode만 표시 */} - <h2 className="text-2xl font-bold tracking-tight"> - {rfq - ? rfq.rfqTitle - ? `견적 상세 관리 ${rfq.rfqCode ?? ""} | ${rfq.rfqTitle}` - : `견적 상세 관리 ${rfq.rfqCode ?? ""}` - : "Loading RFQ..."} - </h2> - - {/* <p className="text-muted-foreground"> - RFQ 관리하는 화면입니다. - </p> */} + {/* 제목과 버튼을 같은 라인에 배치 */} + <div className="flex items-center justify-between"> + <h2 className="text-2xl font-bold tracking-tight"> + {rfq + ? rfq.rfqTitle + ? `견적 상세 관리 ${rfq.rfqCode ?? ""} | ${rfq.rfqTitle}` + : `견적 상세 관리 ${rfq.rfqCode ?? ""}` + : "Loading RFQ..."} + </h2> + <Link href={`/${lng}/evcp/rfq-last`} passHref> + <Button variant="ghost" className="flex items-center text-primary hover:text-primary/80 transition-colors"> + <ArrowLeft className="mr-1 h-4 w-4" /> + <span>견적 목록으로 돌아가기</span> + </Button> + </Link> + </div> + + {/* 생성일과 마감일 표시 */} + {rfq && ( + <div className="flex items-center gap-6 pt-3"> + {/* 생성일 */} + <div className="flex items-center gap-2"> + <Calendar className="h-4 w-4 text-muted-foreground" /> + <span className="text-sm font-medium text-muted-foreground">생성일:</span> + <strong className="text-sm">{formatDate(rfq.createdAt, "KR")}</strong> + </div> + + {/* 구분선 */} + <div className="h-4 w-px bg-border" /> - {/* Due Date 표시 개선 */} - {rfq?.dueDate && dueDateStatus && ( - <div className="flex items-center gap-3 pt-2"> - <span className="text-sm font-medium text-muted-foreground">Due Date:</span> - <strong className="text-sm">{formatDate(rfq.dueDate, "KR")}</strong> - <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${dueDateStatus.bgClassName} ${dueDateStatus.className}`}> - {dueDateStatus.icon} - <span className="text-xs font-medium">{dueDateStatus.text}</span> + {/* 마감일 */} + <div className="flex items-center gap-2"> + <CalendarDays className="h-4 w-4 text-muted-foreground" /> + <span className="text-sm font-medium text-muted-foreground">마감일:</span> + {rfq.dueDate ? ( + <> + <strong className="text-sm">{formatDate(rfq.dueDate, "KR")}</strong> + {dueDateStatus && ( + <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${dueDateStatus.bgClassName} ${dueDateStatus.className}`}> + {dueDateStatus.icon} + <span className="text-xs font-medium">{dueDateStatus.text}</span> + </div> + )} + <DueDateEditButton + rfqId={rfqId} + currentDueDate={rfq.dueDate} + rfqCode={rfq.rfqCode || ''} + rfqTitle={rfq.rfqTitle || ''} + /> + </> + ) : ( + <> + <span className="text-sm text-muted-foreground">미설정</span> + <DueDateEditButton + rfqId={rfqId} + currentDueDate={null} + rfqCode={rfq.rfqCode || ''} + rfqTitle={rfq.rfqTitle || ''} + /> + </> + )} </div> </div> )} |